<template>
  <div>
    <div class="table-responsive">
      <h5><span class="badge bg-success">农资</span></h5>
      <table class="table table-striped table-sm">
        <thead>
          <tr>
            <th scope="col">#</th>
            <th scope="col">产品名称</th>
            <th scope="col">价格</th>
            <th scope="col">单位</th>
            <th scope="col">种类</th>
            <th scope="col">公司</th>
          </tr>
        </thead>
        <tbody>
          <tr v-for="index in range(0, 5)" :key="index">
            <td>{{ index + 1 }}</td>
            <td>{{ productName[index] }}</td>
            <td>{{ price[index] }}</td>
            <td>{{ unit[index] }}</td>
            <td>{{ cateName[index] }}</td>
            <td>{{ company[index] }}</td>
          </tr>
        </tbody>
      </table>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      data: "",
      productName: [],
      price: [],
      unit: [],
      cateName: [],
      company: [],
    };
  },
  mounted() {
    this.axios
      .get("http://122.51.157.58:8081/api-service/getNonewInfo?key=123456")
      .then((body) => {
        this.data = body.data.data.result;
        for (var i = 0; i < this.data.length; i++) {
          this.productName.push(this.data[i].productName);
          this.price.push(this.data[i].productPrice);
          this.unit.push(this.data[i].productUnit);
          this.cateName.push(this.data[i].cateName);
          this.company.push(this.data[i].companyName);
        }
      });
  },
  methods: {
    range(start, end) {
      var arr = [];
      for (var i = start; i < end; i++) {
        arr.push(i);
      }
      return arr;
    },
  },
};
</script>